<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Vertical Center with Flexbox</title>  
<style>  
  body {  
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */  
    height: 100vh; /* 设置body的高度为视口高度 */  
    margin: 0; /* 消除默认边距 */  
  }  
</style>  
</head>  
<body>  
  <div>  
    <h1>Hello, World!</h1>  
    <p>This content is vertically and horizontally centered.</p>  
  </div>  
</body>  
</html>